<template>
  <div class="comp">
    <div class="chart" ref="vertical">我是组件</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartes: null, //实裂对象
      allData: [], //业务数据
    };
  },
  methods: {
    //1.获取eacharts实裂对象  设置基础静态配置项 制基础图标
    initEcharts() {
      //1.1获取eacharts实裂对象
      this.echartes = this.$echarts.init(this.$refs.vertical, "dark");
      //1.2设置基础静态配置项
      let initOptions = {
        //标题
        title: {
          text: "全国收成情况",
          top: "3%",
          left: "3%",
        },
        //坐标xi
        grid: {
          // show: true,
          top: "8%",
          lef: "3%",
          containLabel: true,
        },
        //提示语
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        //x
        xAxis: {
          type: "category",
        },
        //y
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        //系列
        series: [
          {
            type: "bar",
            barWidth: 40,
            label: {
              show: true,
              rotate: 30,
            },
            itemStyle: {
              borderRadius: [20, 20, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "orange", // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: "orangered", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };
      //1.3绘制基础图标
      this.echartes.setOption(initOptions);
    },
    //获取业务数据
    async getData() {
      let { data } = await this.$http.get("plantingHarvest");
      this.allData = data;
      console.log(data);
      //根据数据绘制图表
      this.setEcharts();
    },
    //根据数据绘制图表
    setEcharts() {
      //3.1组装类目轴数据
      let categoryData = this.allData.map((item) => item.month);
      //3.2组装列数据
      let seriesData = this.allData.map((item) => item.harvest);
      //3.3生成配置
      let setOptions = {
        //y
        yAxis: {
          data: categoryData,
        },
        //系列
        series: [
          {
            data: seriesData,
          },
        ],
      };

      //绘制图表
      this.echartes.setOption(setOptions);
    },
    //4.0适配方法
    Adaptive() {
      //获取一个比列尺
      let width = this.$refs.vertical.offsetWidth;
      let scale = (width / 100) * 3.6;

      //根据比列尺动态
      let updataOptions = {
        //标题
        title: {
          textStyle: {
            fontSize: scale,
          },
        },
        //系列
        series: [
          {
            type: "bar",
            barWidth: scale,
            label: {
              show: true,
              position: "right",
            },
            itemStyle: {
              borderRadius: [scale / 2, scale / 2, 0, 0],
            },
          },
        ],
      };
      //使用动态配置绘图
      this.echartes.setOption(updataOptions);
      //只使坐标系内部图表适配
      this.echartes.resize();
    },
  },
  mounted() {
    //1.获取实裂
    this.initEcharts();
    //2.获取业务数据
    this.getData();
    // //3.监听窗口变化
    window.addEventListener("resize", this.Adaptive);
    // //4.使用适配
    this.Adaptive();
  },
  //移除监听
  destroyed() {
    window.removeEventListener("resize", this.Adaptive);
  },
};
</script>


<style>
</style>
